<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子访问父-parent-root</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
    </div>
</body>
    <template id="cpn">
        <div>
            <h2>cpn组件</h2>
            <ccpn></ccpn>
        </div>
    </template>

    <template id="ccpn">
        <div>
            <h2>ccpn组件</h2>
            <button @click="btnClick">button</button>
        </div>
    </template>

    <script src="../js/vue.js"></script>

    <script>
        const cpn = {
            template: '#cpn',
            props: {

            },
            data() {
                return {
                    name: 'cpn组件name',
                }
            },
            methods: {

            },
            components: {
                ccpn: {
                    template: '#ccpn',
                    methods: {
                        btnClick() {
                            //1.访问父组件$parent
                            console.log(this.$parent);
                            console.log(this.$parent.name);

                            //2.访问根组件
                            console.log(this.$root);
                            console.log(this.$root.message);
                        }
                    }
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Vue实例'
            },
            methods: {

            },
            components: {
                cpn
            }
        })
    </script>
</html>